<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>websocket聊天室客户端</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/users.css">
    <link href="./css/tools.css" rel="stylesheet" />
    <link href="./css/emojibg.css" rel="stylesheet" />
</head>
<body>
    <!-- 导航栏开始 -->
    <nav>
        <span class="backBtn"><</span> 
        
        <h3 class="roomTitle">工作群聊(<span class="usersCount"></span>)</h3>
        <span class="moreBtn">≡</span>
    </nav>
    <!-- 侧边导航开始 -->
    <div class="sidebar_mask">
        <div class="sideBar">
            <ul class="sideBar_ul">
               <li class="sideBar_li" id="sideBar_users">聊天室成员</li>
                <li class="sideBar_li" id="sideBar_gg">聊天室公告</li>
                <li class="sideBar_li">设置</li>
            </ul>
        </div>
    </div>
    
    <!-- 侧边导航结束 -->
    <!-- 导航栏结束 -->
   <!-- 聊天界面开始 -->
   <div class="comunication_box">
       <!-- 聊天信息显示窗口 -->
       <div class="comu_con_box" id="comu_con_box">
           <!-- 对方信息开始 -->
         <!--   <div class="otherInfo_wrap childNode" style="width: 100%;overflow:auto">
                <li class="otherInfo_box">
                    <span class="personImg">
                        <img src="./img/headSculpture/hc01.jpg" alt="">
                    </span>
                    <div class="text_content">
                        <span class="personName">小王</span>
                            <p class="info_content">你好呀！我是小王哈。回西安上次不是吃撒成本不错的白醋代表湖北省赌博班VB</p>
                    </div>
                </li>
           </div> -->
           <!-- 对方信息结束 -->

           <!-- 系统提示消息开始 -->
           <!-- <div class="systemInfo childNode">
               ----<span>乐乐</span>进入了聊天室----
           </div> -->
           <!-- 系统提示消息结束 -->

           <!-- 自己信息开始 -->
        <!--    <div class="myInfo_wrap childNode" style="width: 100%;overflow:auto">
             <li class="myInfo_box">
                <span class="personImg">
                    <img src="./img/headSculpture/hc04.jpg" alt="">
                </span>
                <div class="text_content">
                    <span class="personName">我</span>
                        <p class="info_content">你好呀！我是小周哈。多多关照</p>
                </div>
             </li>
           </div>
           <div class="myInfo_wrap childNode" style="width: 100%;overflow:auto">
             <li class="myInfo_box">
                <span class="personImg">
                    <img src="./img/headSculpture/hc04.jpg" alt="">
                </span>
                <div class="text_content">
                    <span class="personName">我</span>
                        <p class="info_content">
                            <img src="./img/headSculpture/hc03.jpg" alt="" width="150px" height="150px">
                        </p>
                </div>
             </li>
           </div> -->
         
           <!-- 自己信息结束 -->


           

       </div>
       <!-- 聊天信息显示窗口结束 -->
       <!-- 信息输入功能板块 -->
       <div class="comunica_tool">
           <div class="InfoEnter">
               <div class="info_text" id="infoContent" contenteditable="true"></div>
               <button id="InfoSendBtn">发送</button>

           </div>
           <ul class="tool_wrap">
               <li>
                  <img src="./img/zp.png" alt="">
                  <input type="file" class="updateImg" id="updateImg">
               </li>
               <li id="openFaceLi">
                  <img src="./img/bq.png" alt="" id="emojiBtn">
               </li>
               <li>
                  <img src="./img/video.png" alt="">
               </li>
               <li>
                  <img src="./img/dy.png" alt="">
               </li>
               <li>
                  <img src="./img/fs.png" alt="">
               </li>
               <li>
                  <img src="./img/其他.png" alt="">
               </li>

           </ul>
       </div>
       <box></box>
       <!-- 信息输入功能板块结束 -->
   </div>
   <!-- 聊天界面结束 -->
   <!-- 表情包展示区开始 -->
   <div class="faceDivBox"  id="faceDivBox" style="width:80%;height:200px;display:none;position: absolute;bottom: 85px;overflow: scroll;">
        <div class="faceDiv" style="height:200px;overflow: scroll;">
            <section class="emoji-box"></section>
            <div class="tabbox" style="overflow: scroll;">
                <section class="emoji-tab"></section>
            </div>
        </div>
        <a class="closeFaceBox" href="javascript:void(0)">×</a>
    </div>
   <!-- 表情包展示区结束-->


   <!-- 当前用户列表页面开始 -->
   <div class="usersPage">
        <!-- 页面导航开始 -->
    <header>
        
        <span class="backBtn" id="backBtn2"><</span>
        <h4 class="pageTitle">聊天成员(<span class="usersCount"></span>)</h4>    
    </header>
     <!-- 页面导航结束 -->
     <!-- 用户列表开始 -->
     <div class="users_wrap">
        <ul class="users_ul">
            <!-- 自己的列表项开始 -->
            <li class="user_li">
                <i class="avastar"><img id="myavastar" src="../img/headSculpture/hc01.jpg" alt=""></i>
                <span class="userName " id="myuserName">小王</span>
                <span class="userSno " id="myuserSno">17103002</span>

            </li>
            <!-- 自己的列表项结束 -->
            <div class="userLi_wrap">
                <!-- <li class="user_li">
                <i class="avastar"><img src="../img/headSculpture/hc06.jpg" alt=""></i>
                <span class="userName">小王</span>
                <span class="userSno">17103002</span>

            </li> -->
            </div>

             
        </ul>
     </div>
     <!-- 用户列表结束 -->
   </div>    
   <!-- 当前用户页面结束 -->

   <!-- 聊天室公告页面开始 -->
   <div class="gonggaoPage">
     <div class="gg_wrap">
       <h4 class="gg_title">公告</h4>
       <p class="gg_content">同学你好！为建立文明和谐的交流环境，禁止在聊天室内进行造谣、诈骗、传播淫秽消息等不文明行为，否则将根据相关规定对您进行处罚！</p>
       <div class="qrBtn" id="qrBtn">我知道了</div> 
     </div>
   </div>
   <!-- 聊天室公告页面结束-->
</body>
<script type="text/javascript" src="./js/emojisort.js"></script>
<script type="text/javascript" src="./js/emoji.js"></script>

<script src="./js/jquery.min.js"></script>
<script src="../socket.io/socket.io.js"></script>
<script src="./js/js.js"></script>
<script>
  $(document).ready(function() {
    //表情实例化
    sdEditorEmoj.Init(emojiconfig);
    //type:容器类型(支持input，div等容器,textarea请用input类型）
    //id:容器ID
    sdEditorEmoj.setEmoji({
        type: 'div',
        id: "infoContent"
    });
})
</script>

</html> 